<template>
  <div id="authenticationDialog">
    <el-dialog
      title="身份验证"
      :visible.sync="authDialogData.isShow"
      width="500px"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="false"
      @close="closeDialog"
    >
      <div class="form-box">
        <el-form ref="passFormRef" :model="passForm" label-width="100px">
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="passForm.phone"
              style="width:270px"
              placeholder="请输入手机号"
              @keyup.native="phoneInput"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input
              v-model="passForm.code"
              placeholder="请输入短信验证码"
              class="btn-input"
              @keyup.native="codeInput"
            ></el-input>
            <el-button
              type="warning"
              size="small"
              class="code-btn"
              :disabled="codeDisabled"
              @click="getCode"
            >
              {{ buttonText }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="submit">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="系统提示"
      :visible.sync="messageShow"
      width="20%"
      top="18vh"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :fullscreen="false"
    >
      <span>{{ message }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="messageShow = false">确认</el-button>
      </span>
    </el-dialog>
    <div class="authen-dialog-modal" v-if="authDialogData.isShow"></div>
  </div>
</template>
<script>
import { validateTelephone } from '@utils/validate'
export default {
  props: {
    authDialogData: {
      type: Object,
      default: function() {
        return {
          isShow: true,
          params: ''
        }
      }
    },
    from: {
      type: String // 来源: notice 通知管理 active 活动管理
    }
  },
  data() {
    // 手机号自定义验证规则
    var valiPhone = (rule, value, callback) => {
      if (!value) {
        callback()
      } else {
        if (validateTelephone(value)) {
          callback()
        } else {
          callback(new Error('请输入正确11位手机号码'))
        }
      }
    }
    return {
      // 表单部
      passForm: {
        phone: '', // 手机号
        code: '' // 验证码
      },
      message: '',
      messageShow: false,
      codeRequestUrl: {
        notice: '/sms/send-code', // 通知管理获取验证码
        active: '/sms/send-code'
      },
      codeVerificationUrl: {
        notice: '/sms/check-code', // 通知管理验证码校验
        active: '/sms/check-code'
      },
      buttonText: '获取验证码',
      totalTime: 60,
      codeDisabled: false
    }
  },
  methods: {
    // 关闭验证身份弹窗
    closeDialog() {
      this.$refs.passFormRef.resetFields()
      this.passForm.phone = ''
      this.passForm.code = ''
    },
    // 点击获取验证码
    getCode() {
      const phoneCheck = validateTelephone(this.passForm.phone)
      if (!phoneCheck) {
        this.message = '手机号码有误，请重填'
        this.messageShow = true
        return false
      }
      this.codeDisabled = true
      let timer = setInterval(() => {
        this.totalTime--
        this.buttonText = `${this.totalTime}秒后重新获取`
        if (this.totalTime < 1) {
          clearInterval(timer)
          this.totalTime = 60
          this.buttonText = '获取验证码'
          this.codeDisabled = false
        }
      }, 1000)
      let url = this.codeRequestUrl[this.from]
      let params = {
        phone: this.passForm.phone
      }
      if (this.$route.name === 'wh:activeManagement:active:publishList') {
        params.menuCode = 'wh:system:publishActivity:audit'
      } else if (this.$route.name === 'wh:operate:active:activeList') {
        params.menuCode = 'wh:system:operationActivity:audit'
      } else if (
        this.$route.name === 'wh:noticeManagement:pubNotice:pubNoticeList'
      ) {
        params.menuCode = 'wh:system:publishNotice:audit'
      } else if (
        this.$route.name === 'wh:noticeManagement:opeNotice:opeNoticeList'
      ) {
        params.menuCode = 'wh:system:operationNotice:audit'
      }
      this.pubRequire(
        'get',
        url,
        params,
        (response) => {
          console.log(response)
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
          clearInterval(timer)
          this.totalTime = 60
          this.buttonText = '获取验证码'
          this.codeDisabled = false
        }
      )
    },
    // 提交按钮
    submit() {
      const phoneCheck = validateTelephone(this.passForm.phone)
      if (!phoneCheck) {
        this.message = '手机号码有误，请重填'
        this.messageShow = true
        return false
      }
      if (!this.passForm.code) {
        this.message = '请输入手机验证码'
        this.messageShow = true
        return false
      }
      let url = this.codeVerificationUrl[this.from]
      let params = {
        phone: this.passForm.phone,
        code: this.passForm.code
      }
      if (this.$route.name === 'wh:activeManagement:active:publishList') {
        // 发布通知
        params.menuCode = 'wh:system:publishActivity:audit'
      } else if (this.$route.name === 'wh:operate:active:activeList') {
        // 运营通知
        params.menuCode = 'wh:system:operationActivity:audit'
      } else if (
        this.$route.name === 'wh:noticeManagement:pubNotice:pubNoticeList'
      ) {
        // 发布活动
        params.menuCode = 'wh:system:publishNotice:audit'
      } else if (
        this.$route.name === 'wh:noticeManagement:opeNotice:opeNoticeList'
      ) {
        // 运营活动
        params.menuCode = 'wh:system:operationNotice:audit'
      }
      // tips:测试环境 验证码校验未打开
      this.pubRequire(
        'get',
        url,
        params,
        (response) => {
          // 验证成功 页面name存入本地缓存 切换tab/刷新后验证弹窗不再出现
          let routeNameArray = JSON.parse(
            sessionStorage.getItem('authenPageName')
          )
            ? JSON.parse(sessionStorage.getItem('authenPageName'))
            : []
          routeNameArray.push(this.$route.name)
          sessionStorage.setItem(
            'authenPageName',
            JSON.stringify(routeNameArray)
          )
          this.authDialogData.isShow = false
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    codeInput() {
      this.passForm.code = this.passForm.code.replace(/[^\d]/g, '')
    },
    phoneInput() {
      this.passForm.phone = this.passForm.phone.replace(/[^\d]/g, '')
    }
  },
  created() {
    let authenPageName = JSON.parse(sessionStorage.getItem('authenPageName'))
    if (authenPageName && authenPageName.includes(this.$route.name)) {
      this.authDialogData.isShow = false
    }
    let phone = JSON.parse(localStorage.getItem('userInfo')).phonenumber
    // let phone = JSON.parse(sessionStorage.getItem('userInfo')).phonenumber
    if (phone) {
      this.passForm.phone = phone
    }
  }
}
</script>
<style lang="less" scoped>
#authenticationDialog {
  :deep(.el-dialog__wrapper) {
    top: 90px;
    left: 200px;
  }
  :deep(.v-modal) {
    top: 90px;
    left: 200px;
  }
  .btn-input {
    width: 180px !important;
    margin-right: 10px;
  }
  .code-btn {
    height: 30px;
  }
  .authen-dialog-modal {
    position: fixed;
    top: 95px;
    bottom: 0;
    left: 220px;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 1999;
  }
}
</style>
